<template>
  <div class="home">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-container">
        <input type="search" placeholder="请输入关键词" class="search-input">
        <svg-icon name="search" class="search-icon" />
      </div>
    </div>

    <!-- 通知栏 -->
    <div class="notice-bar">
      <div class="notice-container">
        <svg-icon name="speakers" class="notice-icon" />
        <span class="notice-text">欢迎家长加入xxxxxxxx小学资料库</span>
      </div>
    </div>

    <!-- 快捷导航 -->
    <div class="quick-nav">
      <div class="quick-nav-container">
        <div class="quick-nav-item">
          <span>会员兑换</span>
        </div>
        <router-link to="/doc_list" class="quick-nav-item router_link">
          <span>
            文档下载
          </span>
        </router-link>
        <div class="quick-nav-item">
          <span>个人中心</span>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <main class="main-content">
      <div class="content-container">
        <!-- 左侧文档列表 -->
        <section class="doc-list">
          <div class="section-header">
            <span>最新文档</span>
            <a href="#" class="more-link">查看更多>></a>
          </div>
          <div class="doc-grid">
            <DocCard v-for="doc in docData" :key="doc.id" :doc="doc" @docClick="goToDocView"/>
          </div>
        </section>

        <!-- 右侧边栏 -->
        <aside class="sidebar">
          <VipCard @fun="showLoginDialog = true" :title="'登录享以下特权'" :only-vip="false"
                   :btnName="'立即登录'"/>
          <div class="user-activities">
            <span class="section-title">用户动态</span>
            <InfiniteScrollList :list="activities" :maxHeight="270" @docClick="goToDocView"></InfiniteScrollList>
          </div>
        </aside>
      </div>
    </main>

    <!-- 推荐区域 -->
    <section class="recommend-section">
      <div class="recommend-container">
        <div class="recommend-left">
          <div class="recommend-docs">
            <div class="recommend-header">
              <span class="section-title">推荐文档</span>
            </div>
            <div >
              <HotList class="hot-list" :list="recommendDocs" @docClick="goToDocView"></HotList>
            </div>
          </div>
          <div class="hot-docs">
            <div class="hot-header">
              <span class="section-title">热门文档</span>
<!--              <div class="hot-tabs">
                <span v-for="tab in HOT_TABS"
                      :key="tab"
                      class="tab-item"
                      :class="{ active: currentTab === tab }"
                      @click="switchHotTab(tab)">
                  {{ tab }}
                </span>
              </div>-->
            </div>
            <div >
              <HotList :list="hotDocs" @docClick="goToDocView"></HotList>
            </div>

          </div>
        </div>
        <div class="recommend-right">
          <h2 class="section-title">创作排行</h2>
          <!-- 创作排行内容 -->
        </div>
      </div>
    </section>
  </div>
    <LoginDialog v-model:visible="showLoginDialog" />
</template>

<script setup lang="ts">
import InfiniteScrollList from '@/components/home/InfiniteScrollList.vue'
import VipCard from '@/components/home/VipCard.vue'
import DocCard from '@/components/home/DocCard.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import LoginDialog from '@/components/home/LoginDialog.vue'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import HotList from '@/components/home/HotList.vue'
import * as HomeApi from '@/api/home'
import { useRouter } from 'vue-router'

/*const HOT_TABS = ['周榜', '月榜', '季榜']
const currentTab = ref('周榜')*/
const windowWidth = ref(window.innerWidth)
const docData = ref<DocData[]>([])
const router = useRouter()

/*function switchHotTab(tab: string){
  currentTab.value = tab
}*/

// 跳转到文档详情页的方法
const goToDocView = (id: string | number) => {
  if (id) {
    router.push({
      name: 'doc_view',
      params: { id: id.toString() }
    })
  }
}

// 生命周期
onMounted(() => {
  window.addEventListener('resize', handleResize)
  fetchData()
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  windowWidth.value = window.innerWidth
}

// 计算属性
computed(() => {
  if (windowWidth.value <= 480 && docData.value.length > 6) {
    return docData.value.slice(0, 6)
  }
  return docData.value
})

async function fetchData() {
  HomeApi.getDocList().then((data) => {
    docData.value = data
  })
  HomeApi.getPopularDocList().then((data) => {
    hotDocs.value = data;
    recommendDocs.value = data
  })
  HomeApi.getActivity().then((data) => {
    activities.value = data;
  })
}

const activities = ref<HomeApi.Activity[]>([])

const hotDocs = ref<HomeApi.HotDocData[]>([])

const recommendDocs = ref<HomeApi.HotDocData[]>([])


// 登录对话框状态
const showLoginDialog = ref(false)
</script>

<style scoped>
.home {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */


  /* 搜索区域样式 */
.search-section {
  background: url('@/assets/img/R-C.jpg') center/cover;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

.search-container {
  position: relative;
  width: 600px;
}

.search-input {
  width: 100%;
  height: 50px;
  padding: 0 50px 0 20px;
  border: none;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 16px;
}

.search-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: #1890ff;
}

/* 通知栏样式 */
.notice-bar {
  background: #fff;
  padding: 10px 5px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.notice-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notice-icon {
  width: 24px;
  height: 24px;
  color: #ff4d4f;
}

.notice-text {
  color: #666;
  font-size: 14px;
}

/* 快捷导航样式 */
.quick-nav {
  background: #fff;
  padding: 10px 5px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.quick-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.quick-nav-container .quick-nav-item:nth-child(1){
  color: #1890ff;
}
.quick-nav-container .quick-nav-item:nth-child(2){
  color: #1ac180;
}

.quick-nav-container .quick-nav-item:nth-child(3){
  color: #da7025;
}
.router_link{

  text-decoration: none;
}

.quick-nav-item {
  flex: 1;
  background: #f8f9fa;
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.quick-nav-item span {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.quick-nav-item:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 主要内容区样式 */
.main-content {
  display: flex;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.content-container {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* 文档列表样式 */
.doc-list {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.hot-list {
  --item-img-width: 120px;
  --item-img-height: 90px;
  --item-info-text-width:180px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header span {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.more-link {
  color: #1890ff;
  text-decoration: none;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  padding: 15px 0;
  width: 100%;
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* 侧边栏样式 */
.sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 用户动态样式 */
.user-activities {
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-title {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

/* 推荐区域样式 */
.recommend-section {
  max-width: 1280px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
}

.recommend-container {
  display: flex;
  gap: 20px;
  width: 100%;
}
.recommend-header{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}
.recommend-left {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.recommend-right {
  width: 300px;
  background: #fff;
  border-radius: 4px;
}

.recommend-docs,
.hot-docs {
}

.hot-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}

.hot-tabs {
  display: flex;
  gap: 10px;
  font-size: 11px;
  margin-left: 15px;
  font-weight: bold;
}

.tab-item {
  padding: 5px 5px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

/* 响应式布局 */
@media (max-width: 1280px) {
  .main-content,
  .recommend-section {
    padding: 0 20px;
  }

  .content-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .recommend-container {
    flex-direction: column;
  }

  .recommend-right {
    width: 100%;
  }

  .doc-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .vip-features{
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (max-width: 1024px) {
  .doc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .doc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 隐藏部分导航项 */
  .nav-right .nav-item:nth-child(1) {
    display: none;
  }
  .nav-item {
    padding: 10px 2px;
  }

}

@media (max-width: 480px) {
  .doc-grid {
    grid-template-columns: 1fr;
  }
  .vip-features{
    grid-template-columns: repeat(2, 1fr);
  }
  .user-activities{
    display:none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .recommend-left{
     grid-template-columns: 1fr;
  }
  .grade-section-container{
    min-width: 220px;
  }
}
</style>



